<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>变宽变高</title>
   <style>
   div{
    width:200px;height:200px;margin:20px;float:left;background:red;border:10px solid black;filter:alpha(opacity:30);opacity:0.3;
   }
   </style>
   <script src="move.js"></script>
   <script>
     window.onload=function(){
	       var aDiv1=document.getElementById("div1");
		       aDiv1.onmouseover=function(){
			     startMove(this,'height',400);    
			   };
			   aDiv1.onmouseout=function(){
			      startMove(this,'height',200);
			   };
			var aDiv2=document.getElementById("div2");
		       aDiv2.onmouseover=function(){
			     startMove(this,'width',400);    
			   };
			   aDiv2.onmouseout=function(){
			      startMove(this,'width',200);
			   };
			   var aDiv3=document.getElementById("div3");
		       aDiv3.onmouseover=function(){
			     startMove(this,'fontSize',50);    
			   };
			   aDiv3.onmouseout=function(){
			      startMove(this,'fontSize',15);
			   };
			  /* var aDiv4=document.getElementById("div4");
		       aDiv4.onmouseover=function(){
			     startMove(this,'borderWidth',200);    
			   };
			   aDiv4.onmouseout=function(){
			      startMove(this,'borderWidth',10);
			   };*/
		       var aDiv5=document.getElementById("div5");
		       aDiv5.onmouseover=function(){
			     startMove(this,'opacity',100);    
			   };
			   aDiv5.onmouseout=function(){
			      startMove(this,'opacity',30);
			   };
	   };
	     //获取元素的内部样式
   /*function getStyle(obj,name){
     if(obj.currentStyle){
	    return obj.currentStyle[name];
	 }else{
	    return getComputedStyle(obj,false)[name];
	 }
   }
      // var alpha=30;
	   
	   function startMove(obj,attr,iTarget,fnEnd){
	     clearInterval(obj.timer);
		 obj.timer=setInterval(function(){
		    var cur=0;
			if(attr=='opacity'){
			   cur=parseFloat(getStyle(obj,attr))*100;
			}else{
			   cur=parseInt(getStyle(obj,attr));
			}
		 
		    //cur=parseInt(getStyle(obj,attr));
		    var speed=(iTarget-cur)/6;
			speed=speed>0?Math.ceil(speed):Math.floor(speed);
			if(iTarget==cur){
			   clearInterval(obj.timer);
			}else{
			  if(attr=='opacity'){
			    obj.style.filter='alpha(opacity:'+(cur+speed)+')';
				obj.style.opacity=(cur+speed)/100;		  			  			 
			  }else{
			   obj.style[attr]=cur+speed+"px";
			  }
			   
			}''
		 },30);
		 
		 
	   }*/
   </script>
</head>
<body>
  <div id="div1">变高</div>
  <div id="div2">变宽</div>
  <div id="div3">变宽</div>
  <div id="div4">变宽</div>
  <div id="div5">变</div>
</body>
</html>